<template>
  <div id="deduction_record">
      <div id="search_box">
          <el-card shadow="hover">
              <el-row>
                  <el-col :span="12">
                      <span class="title_span">考评时间：</span>
                      <el-date-picker
                          v-model="date_arr"
                          type="daterange"
                          format="yyyy年M月d日"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="change_date">
                      </el-date-picker>
                  </el-col>
                  <el-col :span="2">
                      <el-button type="primary" icon="el-icon-search" @click="refresh_data">搜索</el-button>
                  </el-col>
              </el-row>
          </el-card>
      </div>
      <div id="table_box">
          <el-table
              :data="tableData"
              stripe
              border
              :max-height="clientHeight-240"
              style="width: 100%">
              <el-table-column
                  label="序号"
                  type="index"
                  align="center"
                  width="60">
              </el-table-column>
              <el-table-column
                  prop="stage_num"
                  label="考评学期"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="grade_item"
                  label="成绩项">
              </el-table-column>
              <el-table-column
                  prop="option_name"
                  label="考评结果">
              </el-table-column>
              <el-table-column
                  label="得分"
                  width="100">
                  <template slot-scope="scope">
                      {{ scope.row.opt_flg + scope.row.score/100 }}分
                  </template>
              </el-table-column>
              <el-table-column
                  prop="role_name"
                  label="考评部门"
                  width="180">
              </el-table-column>
              <el-table-column
                  prop="effect_time"
                  label="考评时间"
                  width="100">
              </el-table-column>
          </el-table>
      </div>
      <div id="page_box">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page_params.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="page_params.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="page_params.pageCount">
          </el-pagination>
      </div>
  </div>
</template>
<script>
    import {selectScoreRecord} from '@/api/personalMenu'
    export default {
        data() {
            return {
                clientHeight: 500,
                tableData: [],
                date_arr: [],
                teacher_data: [],
                page_params: {
                    pageNum: 1,
                    pageCount: 100,
                    pageSize: 20,
                    start_time: '',
                    end_time: ''
                }
            };
        },
        methods: {
            handleSizeChange(val) {
                this.page_params.pageNum = 1;
                this.page_params.pageSize = val;
                this.refresh_data();
            },
            handleCurrentChange(val) {
                this.page_params.pageNum = val;
                this.refresh_data();
            },
            change_date(arr) {
                if(arr == null){
                    this.page_params.start_time = '';
                    this.page_params.end_time = '';
                }else{
                    this.page_params.start_time = arr[0];
                    this.page_params.end_time = arr[1];
                }
            },
            refresh_data() {
                selectScoreRecord(this.page_params).then((res) => {
                    if (res.code != "200") {
                        this.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    }else{
                        this.page_params.pageCount = res.data.pageCount;
                        this.tableData = res.data.object;
                    }
                }).catch(() => {

                })
            },
        },
        created(){
            this.clientHeight = document.body.clientHeight;
            this.refresh_data();
        }
    }
</script>
<style lang="scss">
  #deduction_record {
    .title_span {
      font-size: 14px;
      color: #606266;
    }
    #search_box {
      margin: 10px;
    }
    #table_box {
      margin: 10px;
    }
    #page_box {
      text-align: center;
      margin: 10px;
    }
  }
</style>
